<template>
    <div class="content">
        <div class="titleClass" @click="projectListshow = !projectListshow">
            <div>{{ shieldName }}</div>
            <img style="margin:9px 12px 10px 11px;width:14px;height:6px;" src="../../../assets/images/Vector 830.png">
        </div>
        <div class="cardContent">
            <van-list v-if="showList" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                @load="GetWarningList_DG">
                <div style="font-size: 12px;" v-for="item, index in WarningList" :key="index" :class="['card',
                    item.wd.level == null ? 'cardNull' : '',
                    item.wd.level == 'I类（红色预警）' ? 'cardRed' : '',
                    item.wd.level == 'II类（橙色预警）' ? 'cardOrange' : '',
                    item.wd.level == 'III类（黄色预警）' ? 'cardYellow' : '',
                ]">
                    <p style="font-size: 14px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 80%;">
                        {{ item.monitoringitem }}
                    </p>
                    <p>
                        <span>预警点位：</span>
                        <span style="color: #0089FF;">{{ item.devicename }}</span>
                    </p>
                    <p>
                        <span>当前流程：</span>
                        <span>
                            {{ item.wd.step == 0 ? '已完结' : item.wp.map((el) => el.stepname).join() }}
                        </span>
                    </p>
                    <p>
                        <span>负责人：</span>
                        <span>
                            {{ item.wd.step == 0 ? '已完结' : item.wdr.map(i => i.userinfo.userName).join('、')
                            }}
                        </span>
                    </p>
                    <p>
                        <span>预警时间：</span>
                        <span>{{ item.warningtime }}</span>
                    </p>
                    <p class="cardSpecialText">
                        <span>预警参数：</span>
                        <span>{{ item.parameter }}</span>
                    </p>
                    <div class="flexRL">
                        <van-button v-if="isProjectManager" type="primary" class="cardBtnDel"
                            @click="delWarning(item)">删除预警</van-button>
                        <van-button type="primary" :style="{ width: isProjectManager ? '48%' : '100%' }" class="cardBtn"
                            @click="details(item)">管理流程</van-button>
                    </div>
                </div>
            </van-list>
            <p v-else style="text-align: center;margin: 40px;font-size: 14px;">没有更多了</p>
        </div>

        <van-popup v-model:show="projectListshow" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="切换盾构机" :model-value="shieldId"
                :columns="shieldEngineerList.map(item => { return { text: item.shieldname, value: item.id, } })"
                @cancel="() => { projectListshow = false }" @confirm="updateShield" />
        </van-popup>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { GetShieldList, GetWarningList } from "@/api";
import { useAppStore } from "../../../store";
import { CreatedFormData } from "@/utils/CreatedFormData";
import { useRouter } from "vue-router";
export default defineComponent({
    name: 'topPipe',
    setup() {
        const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();
        const shieldId = ref([]);
        const shieldName = ref("--");
        const projectListshow = ref(false)
        const shieldEngineerList = ref([])

        const doRefresh = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                    pageIndex: 1,
                    pageSize: 9999,
                })
            const res = await GetShieldList(fd);
            shieldEngineerList.value = res.data ?? [];
            if (localStorage.getItem("shieldId") != null && res.data.some(item => item.id == JSON.parse(localStorage.getItem("shieldId"))[0])) {
                var data = res.data.filter(item => item.id == JSON.parse(localStorage.getItem("shieldId"))[0])[0]
                shieldId.value = [data.id];
                shieldName.value = data.shieldname;
            } else {
                res.data.length ? shieldName.value = res.data[0].shieldname : "--";
                res.data.length ? shieldId.value = [res.data[0].id] : 0;
            }
        }

        const updateShield = ({ selectedValues, selectedOptions }) => {
            projectListshow.value = false;
            var data = shieldEngineerList.value.filter(item => item.id == selectedValues[0])[0]
            shieldName.value = data.shieldname;
            shieldId.value = selectedValues;
            localStorage.setItem("shieldId", JSON.stringify(selectedValues));

            WarningList.value = [];
            loading.value = false;
            finished.value = false;
            pageIndex.value = 1;
            // GetWarningList_DG();
        }

        // 获取预警处理
        const WarningList = ref([]);
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const isProjectManager = ref(projectInfo.members && projectInfo.members.filter(i => i.userId == userInfo.id)[0].isProjectManager)
        const GetWarningList_DG = async () => {
            let fm = CreatedFormData(
                {
                    projectid: projectInfo.id,
                    Monitoringitem: '',
                    devicename: '',
                    processtype: 3,
                    pageindex: pageIndex.value,
                    pagesize: 10,
                    correlationid: shieldId.value[0]
                }
            )
            const res = await GetWarningList(fm)
            if (res.data) {
                WarningList.value = WarningList.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (WarningList.value.length >= res.count) {
                    finished.value = true;
                }
            }
        }
        const delWarning = (item) => {
            showConfirmDialog({
                title: '警告',
                message: '确定删除该数据吗？',
            }).then(() => {
                DelWarning(CreatedFormData({ warningid: item.id })).then(res => {
                    if (res.code == 0) {
                        showSuccessToast(res.msg)
                        WarningList.value = [];
                        loading.value = false;
                        finished.value = false;
                        pageIndex.value = 1;
                        GetWarningList_DG();
                    } else {
                        showFailToast(res.msg)
                    }
                });
            }).catch(() => {
                // on cancel
            });;
        }
        const router = useRouter();
        const details = (el) => {
            router.push({
                path: '/WarningDetail',
                query: {
                    id: el.id,
                    type: 3,
                    jkid: shieldId.value[0]
                }
            })
        }

        const showList = ref(false);
        onMounted(async () => {
            await doRefresh()
            shieldId.value.length ? showList.value = true : ''
        });

        return {
            shieldId,
            shieldName,
            projectListshow,
            shieldEngineerList,
            updateShield,

            WarningList,
            loading,
            finished,
            showList,
            GetWarningList_DG,
            isProjectManager,
            delWarning,
            details
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../../../assets/images/Group 1000004723.png') no-repeat;
    background-size: 100% 100%;
}

//预警处理
.cardContent {
    width: 100%;
    height: 100%;
    height: 70vh;
    overflow-y: auto;
    margin-top: 10px;
    margin-bottom: 100px;
}

.card {
    width: 100%;
    height: 480px;
    margin: 20px 0;
    padding: 20px;
    line-height: 50px;
}

.cardRed {
    background: url('../../../assets/images/workbench/红色预警.png') no-repeat;
    background-size: 100% 100%;
}

.cardOrange {
    background: url('../../../assets/images/workbench/橙色预警.png') no-repeat;
    background-size: 100% 100%;
}

.cardYellow {
    background: url('../../../assets/images/workbench/黄色预警.png') no-repeat;
    background-size: 100% 100%;
}

.cardNull {
    background: url('../../../assets/images/workbench/暂无分级.png') no-repeat;
    background-size: 100% 100%;
}

.cardSpecialText {
    text-indent: -5em;
    padding-left: 5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100px;
}

.cardBtnDel {
    width: 48%;
    height: 80px;
    line-height: 80px;
    margin-top: 20px;
    background-color: transparent;
    border: none;
    color: red;
}

.cardBtn {
    width: 48%;
    height: 80px;
    line-height: 80px;
    margin-top: 20px;
    background-color: transparent;
    border: none;
}
</style>